<template>
    <div style="min-height: 100px; margin-top:10px">
        <BorderBox10 style="">
            <BorderBox8
                style="height: 70px; line-height: 70px; text-align:left; text-indent:20px; color: #fff; font-weight:bold">
                <div class="titleTop">
                    <div class="titleLeft">
                        <slot name="title">{{ props.title }}</slot>
                    </div>
                    <div class="titleRight">
                        <div v-if="props.ss" width="30" class="zk" @click="contract"></div>
                        <div v-else width="30" class="ss" @click="contract"></div>
                        <div width="30" class="tk" @click="tk"></div>
                    </div>
                </div>

            </BorderBox8>
            <div v-if="ss && flag">
              <div style="padding:20px;text-align:left;background-color: #0d226fbf">
                    <slot name="content">
                        <div style="width=100%;text-align:center">
                            <img src="@/assets/zwnr.png" width="50" />
                        </div>
                    </slot>
                </div>

            </div>
        </BorderBox10>
    </div>
    <modal :show="tkFlag" @close="close" :title="props.title">
        <template #content>
            <slot name="modal"></slot>
        </template>

    </modal>
</template>

<script lang="ts" setup>
import { BorderBox10, BorderBox8 } from "@kjgl77/datav-vue3"
import { defineProps, onMounted, reactive, ref, toRef, toRefs, defineExpose, computed } from "vue"
import modal from "../z-modal/index.vue"
let props = defineProps({
    title: {
        default: "标题",
        type: String
    },
    ss: {
        type: Boolean,
        default: true
    }
})
const flag = ref(true)

onMounted(() => {


})
// const ssFlag = computed(() => props.ss)
const contract = () => {
    flag.value = !flag.value
}
const tkFlag = ref(false)
const tk = () => {
    tkFlag.value = true
}
const close = () => {
    tkFlag.value = false
}

defineExpose({
    contract
})

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.titleTop {
    display: flex;
    justify-content: space-between;
	background-color: #0d226fbf;
	
}

.titleRight {
    /* line-height: 70px; */
    padding-right: 10px;
    display: flex;
    align-items: center;
}

.zk {
    width: 30px;
    height: 30px;
    background-image: url("../../assets/zk.png");
    background-size: contain;
}

.ss {
    width: 30px;
    height: 30px;
    background-image: url("../../assets/ss1.png");
    background-size: contain;
}

.tk {
    width: 20px;
    height: 20px;
    background-image: url("../../assets/qp.png");
    background-size: contain;
}

.qptk {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50vw;
    height: 50vh;
    border: 1px solid;
    transform: translate(-50%, -50%);

    /* translate: -50%; */
}
</style>
